问题的由来
第一次关注这个标题编号的问题应该回溯到本科毕业论文的时候了,当时还单独涉猎过这个主题,Word
有个很好的特性级联标题
,一次设置好之后,后续只要设置标题样式就能按照设置的标题编号方式自动编号,我们要做的只是将对应的标题设置成对应基本的标题样式就好了,这个方法让我爱不释手,多年来一直沿用。完全解决了中途插入一章,一节等等导致的章节编号都需要人肉调整的问题,当然还有图片的编号命名什么的,都是类似的。
直到后面开始用markdown
由于各个编辑器的切换,一直没有一个好用的替代方案,所以几年前我写了一个小工具用命令行来做这事rawbin-/markdown-clear
,这个工具解决了在github
写博客的问题,同时在解决博客的问题的基础上解决了在各个平台发文的问题,因为编号是用脚本写上去的,所以用markdown here
在各个平台发文也就顺理成章的转成html就行了,也解决了这个阶段的问题。
前两天把拖欠几个月的全面认知
的总结写了,突然不想用这个脚本来编号了,产生一个想法:能不能不人肉编号,自动编上?然后就有了下面的内容。
先搞起来解决问题
以下操作案例都是在macOS中产出,其他平台可能有些许差别,换汤不换药。
在typora
中写markdown
自动编号
- 打开
typora
【偏好设置】
- 找到【外观】=>【主题】=>【打开主题文件夹】
- 将如下代码加入到打开目录的
base.user.css
中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| #writer { counter-reset: h1 }
h1 { counter-reset: h2 }
h2 { counter-reset: h3 }
h3 { counter-reset: h4 }
h4 { counter-reset: h5 }
h5 { counter-reset: h6 }
#writer h1:before { counter-increment: h1; content: counter(h1) ". " }
#writer h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " }
#writer h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " }
#writer h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " }
#writer h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " }
#writer h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " }
|
讲道理
- 打开
typora
【偏好设置】
- 找到【通用】=>【高级 】=>【开启调试模式】=>勾选
- 然后在非源码模式下=>【右键】=>【检查元素】,就可以看到为什么是
#write
了
- 这个后面还有用
在github pages
写markdown
博客自动编号
我用的是jekyllbootstrap.com
的模板,比较简单
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| .content { counter-reset: h1 }
h1 { counter-reset: h2 }
h2 { counter-reset: h3 }
h3 { counter-reset: h4 }
h4 { counter-reset: h5 }
h5 { counter-reset: h6 }
.content h1:before { counter-increment: h1; content: counter(h1) ". " }
.content h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " }
.content h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " }
.content h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " }
.content h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " }
.content h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " }
|
在其他网页编辑中自动编码
比如各个博客平台,各个自媒体平台等,像我们常用的写文档的语雀都可以的。[最后发现只有那么几个平台可以,有的伪类被过滤替换掉了,有的是直接支持markdown无法富文本编辑,有的…],这里有一个强限制,就是站点要自己可控才行,不然会因为一些过滤规则被干到原形不再。
这里面涉及到一款浏览器插件markdown here
,可以在页面富文本编辑器中将markdown
自动转换为网页,这也是我前面说到的这几年在各个平台发文的套路,写好编号好标题markdown
往编辑器里面一贴,然后一点 ,搞定。
简单尝试
markdown here
有一个配置页面,可以配置和调整css,并能预览效果
- 简单看了下是用
js
把类转成了style
属性,并且不支持伪类
修改源码
到adam-p/markdown-here
看到,已经两年没动代码了
不管三七二十三先 fork
一把到rawbin-/markdown-here
,然后把代码拉下来
先把css文件建起来src/common/auto-number-title
,找容器类可以在markdown here
的选项页面找到.markdown-here-wrapper
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| .markdown-here-wrapper { counter-reset: h1 }
.markdown-here-wrapper h1 { counter-reset: h2 }
.markdown-here-wrapper h2 { counter-reset: h3 }
.markdown-here-wrapper h3 { counter-reset: h4 }
.markdown-here-wrapper h4 { counter-reset: h5 }
.markdown-here-wrapper h5 { counter-reset: h6 }
.markdown-here-wrapper h1:before { counter-increment: h1; content: counter(h1) ". " }
.markdown-here-wrapper h2:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " }
.markdown-here-wrapper h3:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " }
.markdown-here-wrapper h4:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " }
.markdown-here-wrapper h5:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " }
.markdown-here-wrapper h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " }
|
- 然后修改一下注入配置,允许加载这个样式文件,并引入这个样式问题
- 剩下的有错改错就好了
最终产出和应用
克隆rawbin-/markdown-here
打开Chrome 设置三个点=>【更多工具】=>【扩展程序】
打开【开发者模式】
选择【加载已解压的扩展程序】=>选择克隆代码下的src
目录即可安装并加载插件
将插件固定在插件栏方便使用
auto-number-title.scss
内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
| .markdown-here-wrapper { counter-reset: h1; h1 { counter-reset: h2; &:before { counter-increment: h1; content: counter(h1) ". "; } } h2 { counter-reset: h3; &:before { counter-increment: h2; content: counter(h1) "." counter(h2) ". " } } h3 { counter-reset: h4; &:before { counter-increment: h3; content: counter(h1) "." counter(h2) "." counter(h3) ". " } } h4 { counter-reset: h5; &:before { counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". " } } h5 { counter-reset: h6; &:before { counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". " } } h6:before{ counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". " } }
|
再来简单讲一下道理
CSS 自动编号
- 不是一个新特性,或者说是一个老特性了,出现在
CSS 2.1
中,搜索site:w3.org css automatic numbering
可以找到,当然截止今天后来的版本(CSS 3
, CSS 2.2
)都有这个特性,从caniuse
上可以看到,IE8
及以上兼容,很棒吧
- 简单说明
counter-reset
重置
counter-increment
++
counter()
取值
- 配合
before
和after
来做
- 还有更多的玩法,参见
CSS The Defiiniitiive Guide 4th
,这里有翻译gdut-yy/CSS-The-Definitive-Guide-4th-zh
Chrome插件或扩展开发
- 这个 我也没实际搞过,原来看了看书
- 可参考的资料
- 官方文档
sxei/chrome-plugin-demo
或者搜索Chrome插件 全攻略
- 《Chrome扩展及应用开发》,这个就是我原来看的那本老书
还是有些问题没解决
- 上面的操作方式必须要
h1
到h6
依次排开,不然会很好看
- 如果标题本身就编号了的,就有点糟糕了
- 这俩问题在我
github
的博客里面都能看到,解决办法可以是运行下``
顺便探索下CSS
其他可变的内容
CSS变量或者说自定义属性
1 2 3 4 5 6 7
| :root{ --var-test:xxx } .body{ --var-test:ooo; prop-test:var(--var-test) }
|
attr()
- 这个
caniuse
也有些说不清楚,主体兼容也是从IE8
开始的,需要自己总结
- 强大的地方是可以读取属性值,赋给另外的属性,也就是可以来个属性联动
看起来纯CSS的解决方案就到此告一段落了
- 如果能有脚本参与,就自由了
attr()
配合伪类来做展示,是一个JS和CSS通信的一个比较好的方式